/*
 * @Author: hyman
 * @Date: 2022-02-10 10:54:56
 * @LastEditors: hyman
 * @LastEditTime: 2022-02-11 11:54:57
 * @Description: 请填写简介
 */
import React from 'react'
import {Form,Input,Button, Toast } from 'antd-mobile'
import {Link, useNavigate} from 'react-router-dom'
import './login/main.css'
import './login/util.css'
import cookie from 'react-cookies'


const  Login = () =>
{
    let navigate = useNavigate()
    const logins = async(values) => {
    var result = await React.$api.register(values)
    cookie.save('LoginUser', result.data, {path:'/'})
    if(result.code  == '1'){
        Toast.show({
            content: result.msg,
        })
        navigate('/user/base/login')
    } else{
        Toast.show({
            content: result.msg,
          })
        return false;
    }
    
  }

  //邮箱校验
  const checkMobile = (rule, value) => {
    if (value) {
      const reg = new RegExp(
        "^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"
        )
      if (reg.test(value)) {
        return Promise.resolve()
      } else {
        return Promise.reject('请输入正确邮箱地址')
      }
    } else {
        return Promise.reject(new Error('邮箱不能为空!'))
    }
  };
  
    return (
        <>
            <div className="limiter">
                <div className="container-login100" style={{backgroundImage: `url('/images/img-01.jpg')`}}>
                    <div className="wrap-login100 p-b-30">
                        <Form onFinish={logins} className="login100-form validate-form" layout='horizontal'>
                            <div className="login100-form-avatar">
                                <img src="/images/avatar-01.jpg" alt="AVATAR" />
                            </div>

                            <span className="login100-form-title p-t-20 p-b-45"></span>

                            {/* <!-- 邮箱 --> */}
                            <div className="wrap-input100 validate-input m-b-10">
                                <Form.Item name='email' label='邮箱' rules={[{ required: true, message: '邮箱不能为空' },
                                { validator: checkMobile }
                               ]}>
                                    <Input type="text" placeholder='请输入注册邮箱'/>
                                </Form.Item>
                            </div>

                            {/* <!-- 密码 --> */}
                            <div className="wrap-input100 validate-input m-b-10">
                                <Form.Item name='password' label='密码' rules={[{
                                        required: true, //必填
                                        message: '请输入密码'
                                    }]}>
                                         <Input type='password' placeholder='密码不能为空' />
                                    </Form.Item>
                            </div>

                            {/* <!-- 提交按钮 --> */}
                            <div className="container-login100-form-btn p-t-10">
                                <Button  block color="warning" type='submit'>
                                    立即注册
                                </Button>
                            </div>

                            <div className="text-center w-full p-t-25">
                                <Link className="txt1" to="/user/base/login">
                                    登 录
                                </Link>
                            </div>
                        </Form>
                    </div>
                </div>
            </div>
        </>
    )
}

export default Login